<template>
  <view class="ui-page">
    <fui-nav-bar class="ui-header-wrapper" :class="`ui-header-${theme}`" :style="{ height: height + 'px' }" :isFixed="true" :isOccupy="true" :title="title" :background="bgColor" padding="0" size="16" :color="textColor" fontWeight="bold" @init="initHeader" @leftClick="leftClick">
      <fui-icon v-if="showBack" name="arrowleft" :color="textColor"></fui-icon>
    </fui-nav-bar>
    <view v-if="showPlaceHolder" class="ui-header-placeholder" :style="{ height: height + 'px' }"></view>
  </view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { useStore } from 'vuex'

const props = defineProps({
  theme: {
    type: String, // 'default' || 'colorful' || 'transparent'
    default: 'default'
  },
  showBack: {
    type: Boolean,
    default: true
  },
  showTitle: {
    type: Boolean,
    default: true
  },
  showPlaceHolder: {
    type: Boolean,
    default: true
  },
  customTitle: {
    type: String,
    default: ''
  },
  launchFrom: {
    type: String,
    default: ''
  }
})

const store = useStore()
const tab = inject('$tab')

const title = ref('')

const height = ref({})

const bgColor = computed(() => {
  return props.theme === 'default' ? '#fff' : 'transparent'
})

const textColor = computed(() => {
  return props.theme === 'default' ? '#000000' : '#ffffff'
})

const initHeader = (options) => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  title.value = props.showTitle ? (props.customTitle ? props.customTitle : page.$page.meta.navigationBar.titleText) : ''

  height.value = options.height + options.statusBarHeight
  store.commit('SET_TOP_HEIGHT', height.value)
  store.commit('SET_STATUSBAR_HEIGHT', options.statusBarHeight)
}

const leftClick = () => {
  if (props.launchFrom) {
    tab.reLaunch(props.launchFrom)
  } else {
    tab.navigateBack()
  }
}
</script>
